<template>
	<div
		ref="panelContainer"
		:class="{'float-panel': isFloatCenterTop}"
		:style="panelStyle"
		@mousedown="startDrag"
		@mousemove="onDrag"
		@mouseup="stopDrag"
		@mouseleave="stopDrag"
	>
		<div class="header">
			<div class="header-left">
				<span v-if="isShowPage" class="label">总数:<span>10</span></span>
				<el-button v-if="isShowPage" type="primary" size="mini" @click="pagePlay(pageNum - 1)">上一页</el-button>
				<el-button v-if="isShowPage" type="primary" size="mini" @click="pagePlay(pageNum + 1)">下一页</el-button>
				<span class="label">设备编码: <span>{{ toPlayDevice != null ? toPlayDevice.id : '' }}</span></span>
				
			</div>
			<div class="header-right">
				<div v-if="isShowSplit">
					<span>分屏</span>
					<span class="spilt" @click="spiltScreen(1)">1</span>
					<span class="spilt" @click="spiltScreen(4)">4</span>
					<span class="spilt" @click="spiltScreen(9)">9</span>
					<span class="spilt" @click="spiltScreen(16)">16</span>
					<span class="spilt" @click="fullScreen">全屏</span>
				</div>
				<div>
					<i class="el-icon-close close" @click="closeAll"></i>
				</div>
			</div>
		</div>
		<play-window :rectSize="rectSize" :isShowPTZ="isShowPTZ" ref="playWindow"></play-window>
	</div>
</template>
<style scoped>

.float-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	border-radius: 4px;
	background-color: #fff;
}

.close {
	font-size: 22px;
	color: red;

	&:hover {
		cursor: pointer;
	}
	position: relative;  
	z-index: 3;
}


.header {
	border: 1px solid rgb(64, 158, 255);
	height: 40px;
	display: flex;
	align-items: center;
	/* 使子项在主轴上均匀分布，第一个在左侧，最后一个在右侧 */
	justify-content: space-between;


	.header-left {

		padding-right: 10px;

		.label {
			margin-left: 10px;
			margin-right: 10px;
			font-size: 12px;

			span {
				color: red;
			}
		}

		.select {
			margin-left: 10px;
		}


	}

	.header-right {
		padding-right: 30px;

		div {
			float: left;
		}

		span {
			padding-right: 10px;
		}

		.spilt {
			color: #1890ff;

			&:hover {
				cursor: pointer;
			}

		}
	}
}

</style>

<script>
import { mapState } from 'vuex';
import playWindow from '@/components/vplat/PlayWindow/playWindow';


export default {
	name: "PlayPanel",
	components: {
		playWindow
	},
	dicts: [],
	props: {
		//初始化播放窗口数量
		rectSize: {
			type: Number,
			default: 4
		},
		// 是否显示分屏按钮
		isShowSplit: {
			type: Boolean,
			default: true
		},
		// 是否显示分页按钮
		isShowPage: {
			type: Boolean,
			default: true
		},
		// 是否悬浮居中顶层
		isFloatCenterTop: {
			type: Boolean,
			default: false
		},
		// 是否允许拖动
		isDraggable: {
			type: Boolean,
			default: false
		},
		// 是否允许显示云台控制按钮
		isShowPTZ: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {
			pageNum: 1,
			isDragging: false,        // 是否正在拖拽
			initialMouse: { x: 0, y: 0 }, // 鼠标按下时坐标
			dragOffset: { x: 0, y: 0 },   // 拖拽初始偏移
			position: { x: 0, y: 0 }      // 当前偏移位置
		};
	},
	mounted() {
		//console.log(this.isShowPTZ)
	},
	computed: {//每次渲染都会触发
		...mapState({
			//引入模块化变量
			toPlayDevice: state => state.video.playDevice,//新增播放的设备

		}),
	},
	watch: {
		//监听模块化变量变化 
		toPlayDevice(device) {//监听新增播放的设备
			if (device) {
				
			}
		},
		isFloatCenterTop(newVal) {
		if (!newVal) {
			// 切换回非悬浮模式时，重置拖拽位置
			this.position = { x: 0, y: 0 };
			this.$nextTick(() => {
				if (this.$refs.panelContainer) {
					this.$refs.panelContainer.style.transform = '';
				}
			});
		}
	}
	},
	beforeDestroy() {
		
	},
	methods: {
		//关闭所有播放窗口
		closeAll() {
			this.$refs.playWindow.closeAll();
			if(this.isFloatCenterTop){
				this.$emit('change-panel', false);
			} 
		},
		//分页播放
		pagePlay(list) {
			console.log(list);
		},
		//切换分屏数量
		spiltScreen(newSize) {
			this.rectSize = newSize;
			this.$refs.playWindow.spiltScreen(newSize); 
		},
		//全屏
		fullScreen() {
			 this.$refs.playWindow.fullScreen(); 
		},
		// ========== 拖拽控制 ==========
		startDrag(e) {
			// 非悬浮或不可拖拽时禁止
			if (!this.isFloatCenterTop || !this.isDraggable) return;

			// 仅允许在 .header 区域拖拽（避免误触播放区域）
			const header = e.target.closest('.header');
			if (!header) return;

			this.isDragging = true;
			this.initialMouse = {
				x: e.clientX,
				y: e.clientY
			};
			this.dragOffset = { ...this.position };

			// 防止文本选中
			e.preventDefault();
		},

		onDrag(e) {
			if (!this.isDragging) return;

			const dx = e.clientX - this.initialMouse.x;
			const dy = e.clientY - this.initialMouse.y;

			this.position = {
				x: this.dragOffset.x + dx,
				y: this.dragOffset.y + dy
			};
			// 👇 直接操作 DOM，确保样式立即生效
			if (this.$refs.panelContainer && this.isFloatCenterTop) {
				this.$refs.panelContainer.style.transform = `translate(-50%, -50%) translate(${this.position.x}px, ${this.position.y}px)`;
			}
		},

		stopDrag() {
			this.isDragging = false;
		},

		// ========== 动态面板样式 ==========
		panelStyle() {
			if (!this.isFloatCenterTop) {
				return {}; // 👈 非悬浮：不添加任何内联样式，保持原有布局
			}
			return {
				top: '50%',
				left: '50%',
				transform: `translate(-50%, -50%) translate(${this.position.x}px, ${this.position.y}px)`,
				zIndex: 9999,
				position: 'fixed'
			};
		}
	}
};
</script>

